<template>
	<view>
		<uni-grid class="om-menu-grid" ref="grid" @change="change" :show-border="bordered" :column="getCol" :square="square"
		 :data-fontSize="fontSize" style="margin-top: 15px;">
			<uni-grid-item :id="idPrefix?(idPrefix + index):''" v-for="(menu, index) in menuList" :key="index" :index="index"
			 style="text-align: center;" :style="{'marginBottom': bordered ? '0px': '15px'}">
				<view v-if="!menu">
					{{index}}
				</view>
				<view v-if="menu.iconCls" class="grid-item-box">
					<view  style="position: relative; height: 25px;width: 25px;flex:auto;">
						<image class="image" :src="'/static' + menu.iconCls" mode="aspectFill"/>
							<om-dot :showDot="menu.showDot" class="marker"/>
					</view>
					<text class="text" :style="{'width': menu.text.length == 5 ? '70px' : '56px'}">{{ menu.text }}</text>
					<view v-if="menu.badgeText" class="grid-dot">
						<uni-badge :text="menu.badgeText" :type="menu.badgeType?menu.badgeType:'error'" @click="clickBadge(index)" />
					</view>
				</view>
				<view v-else-if="defaultImg" class="grid-item-box">
					<view  style="position: relative; height: 25px;width: 25px;flex:auto;">
						<image class="image" src="/static/images/menus/file.png" mode="aspectFill"/>
							<om-dot :showDot="menu.showDot" class="marker"/>
					</view>
					<text class="text" :style="{'width': menu.text.length == 5 ? '70px' : '56px'}">{{ menu.text }}</text>
					<view v-if="menu.badgeText" class="grid-dot">
						<uni-badge :text="menu.badgeText" :type="menu.badgeType?menu.badgeType:'error'" @click="clickBadge(index)" />
					</view>
				</view>
				<view v-else class="grid-item-box" style="width: 100%;">
					<view class="grid-other-box">{{ menu.text }}</view>
					<!-- <om-avatar :avatarColor="menu.bgColor" :light="true" :text="menu.text" avatarType="radius" avatarSize="xl"></om-avatar> -->
					<!-- <view v-if="menu.badgeText" class="grid-dot" style="right: auto;">
						<uni-badge :text="menu.badgeText" :type="menu.badgeType?menu.badgeType:'error'" @click="clickBadge(index)" style="width: 48px;" />
					</view> -->
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					请选择操作项
				</view>
				<view  class="popup-item padding" @click="openApply" v-show="showApply">
					<text>打开应用</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="transferApply">
					<text>移动应用至其他分组</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="delApply">
					<text>删除应用</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="margin flex justify-end">
					<a class="cancel-btn" @click="cancel">取消</a>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUrl,
		confirmModal,
		ptFloat,
		minusF,
		errorModal,
		ignoreHtml
	} from '@/static/js/common.js';
	import { mapState } from 'pinia';
	import {useLoginUserStore} from '@/stores/login-user.js';
	export default {
		name: 'OmGroupmenu',
		props: {
			/* 数组中的对象属性有：
			{
				text:		菜单标题（必有,点击事件可获取），
				h5url/url:  点击标题路径（必有,点击事件可获取），
				durl:		二级路径（可选,点击事件可获取），
				code：		编码（可选,点击事件可获取），
				showDot		显示红点
				badgeText：	右上角提示内容（可选,点击事件可获取），
				badgeType：	提示框类型（参考uni-badge)
			} 
			*/
			menuList: {
				type: Array,
				default () {
					return [];
				}
			},
			/* 每行菜单数量 */
			colLen: {
				type: [Number, String],
				default: 3
			},
			/* 是否显示边框 */
			bordered: {
				type: Boolean,
				default: false
			},
			/* 菜单项是否正方形 */
			square: {
				type: Boolean,
				default: true
			},
			/* 菜单标题字体大小*/
			fontSize: {
				type: String,
				default: 'smaller'
			},
			/*ID前缀*/
			idPrefix: {
				type: String,
				default: ''
			},
			group: {
				type: [String, Number],
				default: ''
			},
			groupId: {
				type: String,
				default: ''
			},
			defaultImg: {
				type: Boolean,
				default: false //没有图标是否设定默认图标
			},
		},
		data() {
			return {
				width: 0,
				dataitem: {},
				showApply: false
			};
		},
		computed: {
			...mapState(useLoginUserStore, ['userName', 'userId']),
			getCol() {
				if (this.colLen <= 5) {
					return this.colLen;
				}
				return 5;
			}
		},
		methods: {
			_getSize(fn) {
				if (this.width) {
					fn(this.width)
				} else {
					uni.createSelectorQuery()
						.in(this)
						.select('.om-menu-grid')
						.boundingClientRect()
						.exec(ret => {
							this.width = parseInt((ret[0].width - 1) / parseInt(this.colLen))
							fn(this.width)
						})
				}
			},
			getUrl(index) {
				let item = this.menuList[index]
				if (index >= this.menuList.length) {
					return ""
				}
				let tempUrl = item.h5url
				if (!tempUrl) {
					return ""
				}
				let url = tempUrl + '?title=' + item.text;
				if (item.durl) {
					url += '&durl=' + item.durl;
				}
				if (item.code) {
					url += '&code=' + item.code;
				}
				if (item.badgeText) {
					url += '&badgeText=' + item.badgeText;
				}
				return url
			},
			change(e) {
				// let {
				// 	index
				// } = e.detail
				// let url = this.getUrl(index)
				// if (url) {
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// } else {
				// 	this.$emit("click", {
				// 		index: index,
				// 		group: this.group
				// 	})
				// }
				
				let item = this.menuList[e.detail.index]
				if(item.text == '添加应用'){
					uni.navigateTo({
						url: "/pages/main/group/add-apply?groupId="+this.groupId
					});
				}else{
					this.$refs.popup.open()
					this.dataitem = e
					if(item.h5url){
						this.showApply = true
					}else{
						this.showApply = false
					}
				}
			},
			clickBadge(e) {
				this.$emit('clickBadge', {
					index: e,
					group: this.group
				});
			},
			cancel(){
				this.$refs.popup.close()
			},
			openApply(){
				let _that = this;
				let e = this.dataitem
				let {
					index
				} = e.detail
				let url = this.getUrl(index)
				if (url) {
					if(_that.menuList[index].attributes.formTypeCode == '23862'){
						_that.om.request(
							"wxPosBusiAuth/isnew", {
								code: _that.menuList[index].code
							},
							"post"
						).then(res => {
							if(res.succeed){
								if(res.value){
									uni.navigateTo({
										url: url
									})
								}else{
									errorModal(_that,"提示信息","当前登录人("+_that.userName+")的任职岗位没有《"+_that.menuList[index].text+"》(PC端默认表名称《"+ _that.menuList[index].formName +"》)编辑权限，如需授权请联系OM系统管理员。",()=>{
										
									})
								}
							}else{
								_that.om.toast(res.msg)
							}
						})
					}else{
						uni.navigateTo({
							url: url
						})
					}
				} else {
					this.$emit("click", {
						index: index,
						group: this.group
					})
				}
			},
			transferApply(){
				let _that = this;
				let item = _that.menuList[_that.dataitem.detail.index]
				uni.navigateTo({
					url: "/pages/main/group/select-group?applyId="+item.id
				});
				_that.$refs.popup.close()
			},
			delApply(){
				let _that = this;
				let item = _that.menuList[_that.dataitem.detail.index]
				uni.showModal({
					title: '删除应用',
					content: '该应用将从分组菜单删除',
					showCancel: true,
					success(res){
						if(res.confirm){
							_that.om.request('wxNewGroupMenu/removeAppFormGroup', {
								groupId: _that.groupId,
								appId: item.id
							},'post').then(res => {
								if (res.succeed) {
									let index = _that.dataitem.detail.index
									_that.menuList.splice(index, 1)
									_that.$refs.popup.close()
								}else{
									_that.om.toast(res.msg);
								}
							});
						}
					}
				})
			}
		}
	};
</script>

<style>
	.marker {
		position: absolute;
		top: -5px;
		right: -5px;
	}

	.om-menu-text {
		padding: 3px;
		text-align: center;
	}

	/*  */
	.om-menu-img {
		display: block;
		width: 28px;
		height: 28px;
		margin: 0 auto;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 13px;
		/* margin-top: 5px; */
		/* width: 65px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap; */
		flex: auto;
		height: 32px;
	}

	.grid-item-box {
		flex: 1;
		/* position: relative; */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.grid-dot {
		position: absolute;
		top: 0px;
		right: 15px;
	}
	
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
	}
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-item .txt{
		text-align: left;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
	.grid-other-box{
		color: #FFF;
		background: #ccc;
		height: 44px;
		line-height: 44px;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 3px;
		margin: 0 5%;
		width: 56px;
	}
</style>
